<template>
  <!--<div id="Vue">-->
    <!--<div class="top">-->
      <!--<p>{{notice}}</p>-->
    <!--</div>-->
    <!--<div class="back">-->
      <!--<div class="information">-->
        <!--<input type="number" placeholder="请输入您的号码" v-model="phone"-->
               <!--onkeyup="this.value=this.value.replace(/\D/g,'')"-->
               <!--oninput="if(value.length>11)value=value.substring(0,11)">-->
      <!--</div>-->
      <!--<div class="choice">-->
        <!--<p>请选择充值的金额</p>-->
      <!--</div>-->
      <!--<div class="recharge_hurg">-->
        <!--<ul>-->
          <!--<li :class="[index == selectItem ? 'bechoice':'']" v-for="(item,index) in products" :key="index"-->
              <!--@click="choicePrice(index,item)">-->
              <!--<div>-->
                <!--<ul style="line-height: 2rem; font-size: 1.2rem">{{JSON.parse(item.specifications)[0]}}</ul>-->
                <!--<ul style="line-height: 1.8rem">特惠价：{{item.price}}</ul>-->
              <!--</div>-->
          <!--</li>-->
        <!--</ul>-->
        <!--<div class="agree" style="height: 40px;margin-left: 2%">-->
          <!--<div class="radio-tongyi"> <el-checkbox style="float:left" v-model="status" /></div>-->
          <!--<div class="tongyi" style="float:left;margin-left: 5px">同意</div>-->
          <!--<div class="xieyi" style="float:left" onclick="clickXieyi">《话费慢充协议》</div>-->
        <!--</div>-->
        <!--<div class="recharge_btn" @click="pay">充值</div>-->
      <!--</div>-->
    <!--</div>-->
    <!--<div style="margin-left: 5px;margin-top: 10px;margin-right: 5px">-->
      <!--<div class="classname">温馨提示:</div>-->
      <!--<div class="classname">1.本产品充值为特惠慢充，绝对真实有效，日常到账48小时内，高峰到账72小时内，超时未到账全额退款。一旦充值无法退款，急用请慎拍!号码请仔细核对，个人原因充错号码概不负责!</div>-->
      <!--<div class="classname">2.包含但不限于携号转网号、物联网号，运营商黑名单特殊号码无法完成充值，充值失败金额全额退款。</div>-->
      <!--<div class="classname">3.面额超过100元的，平台将可能分批充值到您账户。</div>-->
      <!--<div class="classname">4.客服电话:07745200522，工作日接听。</div>-->
    <!--</div>-->
    <!--<div v-html="alipayWap" ref="alipayWap"></div>-->
  <!--</div>-->
  <section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
      <!--<a href="javascript:;" class="aui-navBar-item" style="padding-left:5px;">-->
        <!--<i class="icon icon-return"></i>-->
        <!--手机充值-->

      <!--</a>-->
      <div class="aui-center">
        <span class="aui-center-title"></span>
      </div>
      <a class="aui-navBar-item" @click="toOrders()">我的订单
      </a>
    </header>
    <section class="aui-scrollView">
      <van-notice-bar class="notice-swipe"  wrapable :scrollable="false" :text="notice" left-icon="volume-o"/>
      <div class="aui-recharge-box">
        <div class="aui-recharge-iphone">
          <div class="aui-well-bd">
            <p>
              <input v-model="phone" type="text" name="" id="" placeholder="">
            </p>
          </div>
          <div class="aui-well-hd">
            <img src="~@/assets/img/icon-mem.png" alt="">
          </div>
        </div>
        <div class="aui-cell-box">
          <h3>充话费</h3>
          <div class="aui-grids">
            <div href="javascript:;"  :class="[index == selectItem ? 'this-card aui-grids-item':'aui-grids-item']" v-for="(item,index) in products" :key="index"
               @click="choicePrice(index,item)">
              <span>{{JSON.parse(item.specifications)[0]}}</span>
              <span class="aui-grids-item-text">售价{{item.price}}元</span>
            </div>
            <!--<a href="javascript:;" class="aui-grids-item">-->
              <!--<span>50元</span>-->
              <!--<span class="aui-grids-item-text">售价29.95元</span>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="aui-grids-item">-->
              <!--<span>100元</span>-->
              <!--<span class="aui-grids-item-text">售价29.95元</span>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="aui-grids-item this-card">-->
              <!--<span>200元</span>-->
              <!--<span class="aui-grids-item-text">售价29.95元</span>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="aui-grids-item">-->
              <!--<span>300元</span>-->
              <!--<span class="aui-grids-item-text">售价29.95元</span>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="aui-grids-item">-->
              <!--<span>500元</span>-->
              <!--<span class="aui-grids-item-text">售价29.95元</span>-->
            <!--</a>-->
          </div>
          <div class="agree" style="height: 40px;margin-left: 2%">
            <!--<div class="radio-tongyi"> <el-checkbox style="float:left" v-model="status" /></div>-->
            <!--<div class="tongyi" style="float:left;margin-left: 5px">同意</div>-->
            <div class="xieyi" @click="toIntroduce" style="float:left;margin-top: 10px;">常见问题</div>
          </div>
          <div class="footerBtn" @click="toPay">充值</div>
        </div>
        <div style="margin-left: 5px;margin-top: 10px;margin-right: 5px">
          <div class="classname" style="margin-top: 10px">温馨提示:</div>
          <div class="classname" style="margin-top: 5px">1.本产品充值为特惠慢充，绝对真实有效，日常到账48小时内，高峰到账72小时内，超时未到账全额退款。一旦充值无法退款，急用请慎拍!号码请仔细核对，个人原因充错号码概不负责!</div>
          <div class="classname" style="margin-top: 5px">2.包含但不限于携号转网号、物联网号，运营商黑名单特殊号码无法完成充值，充值失败金额全额退款。</div>
          <div class="classname" style="margin-top: 5px">3.面额超过100元的，平台将可能分批充值到您账户。</div>
          <!--<div class="classname">4.客服电话:07745200522，工作日接听。</div>-->
        </div>
        <!--<div class="aui-cell-box">-->
          <!--<h3>充流量</h3>-->
          <!--<div class="aui-grids">-->
            <!--<a href="javascript:;" class="aui-grids-item">-->
              <!--<span>1G</span>-->
              <!--<span class="aui-grids-item-text">售价30.95元</span>-->
              <!--<p>全国当月有效</p>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="aui-grids-item">-->
              <!--<span class="aui-height">更多流量</span>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="aui-grids-item">-->
              <!--<span style="font-size:1.2rem">3折办宽带</span>-->
              <!--<span class="aui-grids-item-text">售价29.95元</span>-->
            <!--</a>-->
          <!--</div>-->
        <!--</div>-->
      </div>
    </section>
    <!--<footer class="aui-tabBar">-->
      <!--<a href="javascript:;" class="aui-tabBar-item">-->
        <!--<span>手机营业厅</span>-->
      <!--</a>-->
      <!--<a href="javascript:;" class="aui-tabBar-item">-->
        <!--<span>境外上网</span>-->
      <!--</a>-->
      <!--<a href="javascript:;" class="aui-tabBar-item">-->
        <!--<span>送好友话费</span>-->
      <!--</a>-->
      <!--<a href="javascript:;" class="aui-tabBar-item">-->
        <!--<span>更多服务</span>-->
      <!--</a>-->
    <!--</footer>-->
  </section>
</template>

<style>
  html,body {
    color: #333;
    margin: 0;
    height: 100%;
    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
  }

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .notice-swipe {
    height: 30px;
    line-height: 30px;
  }

  .xieyi{
    color: #108ee9;
    width: 35%;
    float: left;
  }

  .classname {
    line-height: 1.05rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }

  .footerBtn{
    line-height:40px;
    width: 100%;
    height: 40px;
    padding: 24rpx 0;
    text-align: center;
    border-radius:5px;
    background-color: #50b56a;
    color: #fff;
    font-size: 28rpx;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  a, label, button, input, select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  img {
    border: 0;
  }

  body {
    background: #efeff2;
    color: #666;
  }

  html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #08acee;
  }

  button {
    outline: 0;
  }

  img {
    border: 0;
  }

  button,input,optgroup,select,textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
  }

  li {
    list-style: none;
  }

  a {
    color: #666;
  }

  .clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }

  .clearfix {
  }

  /* 必要布局样式css */
  .aui-flexView {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .aui-scrollView {
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .aui-navBar {
    height: 44px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: none;
    z-index: 1002;
    background: #303030;
  }

  .aui-navBar-item {
    height: 44px;
    min-width: 25%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    padding: 0 0.9rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    color: #ffffff;
    position: relative;
  }

  .aui-navBar-item:first-child {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    margin-right: -25%;
    font-size: 0.9rem;
    font-weight: bold;
  }

  .aui-navBar-item:last-child {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .aui-center {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 44px;
    width: 50%;
    margin-left: 25%;
  }

  .aui-center-title {
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    color: #3c3c3c;
  }

  .icon {
    width: 20px;
    height: 20px;
    display: block;
    border: none;
    float: left;
    background-size: 20px;
    background-repeat: no-repeat;
  }

  .icon-return {
    background-size: 17px;
    background-image: url("");
    height: 16px;
    width: 20px;
  }

  .aui-recharge-box {
    /*margin-top: 15px;*/
    padding: 20px 15px;
    position: relative;
    overflow: hidden;
    background: #fff;
  }

  .aui-recharge-iphone {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-bottom: 10px;
  }

  .aui-well-bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }

  .aui-well-hd {
    margin-left: .8em;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .aui-well-hd img {
    width: 100%;
    max-height: 100%;
    vertical-align: top;
    display: block;
    border: none;
  }

  .aui-well-bd p input {
    width: 100%;
    padding: 4px 0;
    font-size: 1.5rem;
    border: none;
    background: none;
  }

  .aui-well-bd p {
    color: #333;
    font-size: 0.8rem;
  }

  .aui-well-bd p em {
    font-style: normal;
  }

  .aui-recharge-iphone::after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #B2B2B2;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }

  .aui-cell-box h3 {
    height: 40px;
    line-height: 40px;
    color: #999999;
    font-size: 0.85rem;
    font-weight: normal;
  }

  .aui-cell-box-list {
    overflow: hidden;
    position: relative;
    background-color: #FFF;
  }

  .aui-grids {
    position: relative;
    overflow: hidden;
  }

  .aui-grids-item {
    width: 29%;
    float: left;
    position: relative;
    z-index: 0;
    padding: 0.7rem 0;
    font-size: 0.28rem;
    border: 1px solid #50b56a;
    border-radius: 5px;
    color: #50b56a;
    text-align: center;
    margin-right: 4%;
    margin-bottom: 10px;
    height: 85px;
  }

  .aui-grids-item span {
    font-size: 1.6rem;
    width: 100%;
    display: block;
  }

  .aui-grids-item .aui-grids-item-text {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #95d2a5;
  }

  .aui-grids a:nth-child(3) {
    margin-right: 0;
  }

  .aui-grids a:nth-child(6) {
    margin-right: 0;
  }

  .aui-grids-item .aui-height {
    height: 85px;
    line-height: 64px;
    font-size: 1rem;
  }

  .this-card {
    background: #50b56a;
    border: 1px solid #50b56a;
    color: #fff;
  }

  .this-card .aui-grids-item-text {
    color: #f5f5f5;
  }

  .aui-grids-item p {
    color: #c9c9c9;
    font-size: 0.7rem;
  }

  .aui-tabBar {
    width: 100%;
    position: relative;
    z-index: 100;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 0;
  }

  .aui-tabBar-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #576b95;
  }

  .aui-tabBar-item span {
    color: #576b95;
    font-size: 0.8rem;
    /* padding-bottom:20px; */
    position: relative;
  }

  .aui-tabBar-item span:before {
    content: '';
    position: absolute;
    z-index: 2;
    border-right: 1px solid #576b95;
    width: 1px;
    height: 13px;
    top: 3px;
    left: -20px;
  }

</style>
<!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>-->

<script>
  import wx from 'weixin-jsapi'
  import Vue from 'vue'
  import { NoticeBar,Toast } from 'vant'
  import 'vant/lib/index.css'

  export default {
    data () {
      return {
        code: '',
        visitCode: '',
        ko: '',
        question: '',
        status: true,
        thePrice: 50,
        confirm: '',
        notice: '',
        name: '',
        phone: '',
        card: '',
        selectItem: 0,
        products: [],
        alipayWap: '',
        token: '',
        reg: /^1[0-9]{10}$/
      }
    },
    created () {
      Vue.use(NoticeBar)
      Vue.use(Toast)
      document.title = '话费充值特惠95折'
      this.token = localStorage.getItem('token')
      this.visitCode = this.$route.query.visitCode
      if (this.token === 'undefined' || this.token === undefined || this.token === '' || this.token === null) {
        if (window.location.href.indexOf('code=') === -1) {
          this.redirect()
          return
        }
        this.code = window.location.href.substring(window.location.href.indexOf('code=') + 5, window.location.href.indexOf('&state='))
        this.init()
      } else {
        this.loadProduct()
      }
      this.getConfig()
    },
    methods: {
      redirect () {
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxefabc5f8dc4924d8&redirect_uri=' +
          encodeURIComponent('https://www.qinnongzhe.com:82/yx/page/index.html#/phone?visitCode=' + this.visitCode) +
          '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&connect_redirect=1'
      },
      toIntroduce () {
        this.$router.push({name: 'introduce'})
      },
      getConfig () {
        this.$httpApp({
          url: this.$httpApp.adornUrl('/app/wechat/getWechatConfig'),
          method: 'post',
          data: this.$httpApp.adornData({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            wx.config({
              debug: false,
              appId: data.config.appid,
              timestamp: data.config.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.config.nonceStr, // 必填，生成签名的随机串
              signature: data.config.paySign, // 必填，签名
              jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
            })
            wx.ready(function () {
              wx.checkJsApi({
                jsApiList: ['chooseWXPay'],
                success: function (res) {
                  console.log('seccess')
                  console.log(res)
                },
                fail: function (res) {
                  console.log('fail')
                  console.log(res)
                }
              })
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      toOrders () {
        this.$router.push({name: 'orders'})
      },
      init () {
        this.$httpApp({
          url: this.$httpApp.adornUrl('/app/wechat/login?code=' + this.code + '&visitCode=' + this.visitCode),
          method: 'post',
          data: this.$httpApp.adornData({})
        }).then(({data}) => {
          if (data.code === 0) {
            localStorage.setItem('token', data.token)
            this.token = data.token
            this.loadProduct()
          } else {
            this.redirect()
            localStorage.setItem('token', '')
          }
        })
      },
      loadProduct () {
        this.$httpApp({
          url: this.$httpApp.adornUrl('/app/productDetailLogin?id=1181094'),
          method: 'post',
          headers: {
            'token': this.token
          },
          data: this.$httpApp.adornData({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.notice = data.notice
            this.products = data.products
            this.choicePrice(0, this.products[0])
          } else if (data.code === 402) {
            localStorage.setItem('token', '')
            this.redirect()
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      toPay () {
        let $this = this
        if ($this.phone === '' || $this.phone.length <= 10 || !$this.reg.test($this.phone)) {
          alert('请输入正确的电话号码')
          return
        }
        if (!$this.status) {
          return false
        }
        $this.status = false
        const toast = Toast.loading({
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner'
        })
        this.$httpApp({
          url: this.$httpApp.adornUrl('/app/wechat/pay/order'),
          method: 'post',
          headers: {
            token: $this.token,
            sourceType: 4,
            'Content-Type': 'application/json; charset=utf-8'
          },
          data: this.$httpApp.adornData({
            rechargeInfo: JSON.stringify({'手机号': $this.phone}),
            goodsId: $this.thePrice.goods_id,
            productId: $this.thePrice.id
          })
        }).then(({data}) => {
          $this.status = true
          toast.clear()
          if (data && data.code === 0) {
            wx.ready(function () {
              wx.chooseWXPay({
                appId: data.result.appId,
                timestamp: data.result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: data.result.nonceStr, // 支付签名随机串，不长于 32
                package: data.result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: data.result.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: data.result.paySign, // 支付签名
                success: function (res) {
                  // 跳转到支付成功页面有这个页面
                  // $this.$router.push({
                  //   path: '/success_page',
                  //   name: 'success_page
                  // })
                  console.log(res)
                },
                cancel: function (res) {
                  $this.$message.error('支付关闭')
                },
                fail: function (res) {
                  $this.$message.error('支付失败，请重试')
                }
              })
            })
          } else if (data.code === 402) {
            this.redirect()
          } else {
            localStorage.removeItem('token')
            $this.$message.error('下单失败请联系客服或稍后再试')
          }
        })
      },
      choicePrice (index, price) {
        this.selectItem = index
        this.thePrice = price
      }
    }
  }
</script>
